<script lang="ts" setup>
import { ref } from 'vue'
import { APP_TABBAR_HEIGHT } from '@/constant/index'
import type { Tab } from '@/types/index'
import { useSafeAreaHooks } from '@/composables/useSafeArea'

const emits = defineEmits(['change'])

const { bottom } = useSafeAreaHooks()

const currentTab = ref('home')

onLoad((options) => {
  currentTab.value = options!.active || 'home'
})

const tabs = [
  { name: '首页', path: 'home', icon: 'home' },
  { name: '视频', path: 'video', icon: 'video' },
  { name: '发布', path: 'plusempty', icon: 'plusempty' },
  { name: '消息', path: 'notification', icon: 'notification' },
  { name: '我的', path: 'person', icon: 'person' },
] as Tab[]

function onTap(tab: Tab) {
  emits('change', tab)
  currentTab.value = tab.path
}
const getStyle = computed(() => {
  return {
    height: `${APP_TABBAR_HEIGHT}px`,
    paddingBottom: `${bottom}px`,
  }
})
</script>

<template>
  <!-- 底部导航栏 -->
  <view
    class="tab-bar"
    :style="{ ...getStyle }"
  >
    <view
      v-for="(tab) in tabs"
      :key="tab.path"
      class="tab-item"
      @tap="onTap(tab)"
    >
      <template v-if="tab.path === 'plusempty'">
        <wd-icon
          name="add"
          color="#fff"
          size="22px"
        />
      </template>
      <template v-else>
        <text
          class="tab-text"
          :class="{ active: currentTab === tab.path }"
        >
          {{ tab.name }}
        </text>
      </template>
    </view>
  </view>
</template>

<style lang="less" scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tab-item:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF2442;
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    box-shadow: 0 2px 8px rgba(255, 36, 66, 0.2);
  }

  .tab-item:nth-child(3) .uni-icons {
    color: #fff;
  }

  .tab-text {
    font-size: 32rpx;
    color: #666;
  }

  .tab-text.active {
    color: #FF2442;
    font-weight: bold;
  }
}
</style>
